<template>
  <div class="container">
    <Header></Header>
    <Nav></Nav>
    <div class="content">
      <p class="title">{{ this.garden_title }}</p>
      <div class="left">
        <p>简介：</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ this.garden_information }}
      </div>
      <video class="v" src="../video/heart.mp4" controls width="30%" height="30%"></video>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '../components/header.vue'
import Nav from '../components/nav.vue'
import Footer from '../components/footer.vue'
import eventBus from '../views/eventBus'
export default {
  name: 'main_teacher',
  components: {
    Header,
    Nav,
    Footer
  },
  data() {
    return {
      garden_id: [],
      garden_information: [],
      garden_title: [],
    }
  },
  created() {
    eventBus.$on('garden_title', item => {
      this.garden_title = item
      console.log(this.garden_title)
    }),
      eventBus.$on('garden_information', item => {
        this.garden_information = item
        console.log(this.garden_information)
      }),
      eventBus.$on('garden_id', item => {
        this.garden_id = item
        console.log(this.garden_id)
      })
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style scoped>
.content {
  position: relative;
  width: auto;
  display: inline-block;
  border: 1px solid black;
}

.left {
  position: absolute;
  top: 122px;
  left: 200px;
  margin-left: 200px;
  display: inline-block;
  width: 200px;
  height: 220px;
}

.v {
  margin-left: 608px;
  margin-top: 121px;
  margin-bottom: 70px;
}

.title {
  position: absolute;
  top: -11px;
  left: 487px;
  font-size: 30px;
}
</style>
